import { onKeyStroke } from "@vueuse/core";
import { computed, effect, onUnmounted, shallowRef, watch } from "vue";
import { TEXTALIGN } from "../utils/constant.js";
import { messageType } from "../../config.js";
export default function useShoutKeyConfig(modelValue, swiper, emit) {
  const shortcutKeyConfig = [
    {
      label: "向左切换",
      des: "向上键 或 A键",
      key: ["ArrowLeft", "A", "a"],
      handler: ({ swiper }) => {
        swiper?.slidePrev();
      },
    },
    {
      label: "向右切换",
      des: "向下键 或 D键",
      key: ["ArrowRight", "D", "d"],
      handler: ({ swiper }) => {
        swiper?.slideNext();
      },
    },
    {
      label: "字体大小",
      des: "W 或 向上 (大) 键 S 或 向下(小) 键",
      key: ["ArrowUp", "W", "w", "ArrowDown", "S", "s"],
      handler: ({ event, modelValue, emit }) => {
        switch (event.key) {
          case "ArrowUp":
          case "W":
          case "w":
            if (modelValue.fontSize === 100) return;
            modelValue.fontSize += 2;
            break;
          case "ArrowDown":
          case "S":
          case "s":
            if (modelValue.fontSize === 12) return;
            modelValue.fontSize -= 2;
            break;
        }
        emit(modelValue);
      },
    },

    {
      label: "行高",
      des: "+ (大) 键 -(小) 键",
      key: ["+", "_"],
      handler: ({ event, modelValue, emit }) => {
        if (event.key === "_") {
          if (modelValue.lineHeight === 12) return;
          modelValue.lineHeight -= 2;
        } else if (event.key === "+") {
          if (modelValue.lineHeight === 180) return;
          modelValue.lineHeight += 2;
        }
        emit(modelValue);
      },
    },
    {
      label: "行数",
      des: "依次对应数字键的 3 4 6 8",
      key: ["3", "4", "6", "8"],
      handler: ({ event, modelValue, emit }) => {
        if (event.target.nodeName != "INPUT") {
          modelValue.rows = Number(event.key);
          emit(modelValue);
        }
      },
    },
    {
      label: "文字对齐",
      des: "L(左) 键 E(中) 键 R(右) 键",
      key: ["E", "e", "L", "l", "r", "R"],
      handler: ({ event, modelValue, emit }) => {
        switch (event.key) {
          case "E":
          case "e":
            modelValue.textAlign = TEXTALIGN.CENTER;
            break;
          case "L":
          case "l":
            modelValue.textAlign = TEXTALIGN.LEFT;
            break;
          case "r":
          case "R":
            modelValue.textAlign = TEXTALIGN.RIGHT;
            break;
        }
        emit(modelValue);
      },
    },
  ];
  const cleanups = shallowRef([]);

  const isTag = computed(() => {
    return (modelValue.messageType === messageType.ZM || modelValue.messageType === messageType.JW) && swiper.value;
  });

  effect(() => {
    if (isTag.value) {
      if (cleanups.value.length > 0) {
        clear();
      }
      cleanups.value = shortcutKeyConfig.map((item) => {
        return onKeyStroke(
          item.key,
          (event) =>
            item.handler.call(this, {
              event,
              modelValue,
              swiper: swiper.value?.swiper,
              emit,
            }),
          { dedupe: true }
        );
      });
    }
  });

  onUnmounted(() => {
    clear();
  });

  watch(
    () => modelValue.messageType,
    (newVal) => {
      if (messageType.GP === newVal) {
        clear();
      }
    }
  );

  function clear() {
    cleanups.value.forEach((cleanup) => cleanup());
    cleanups.value = [];
  }

  return { shortcutKeyConfig, cleanups };
}
